<template>
    <rx-layout>
        <template v-slot:center>
            <rx-grid ref="rxGrid" :data="data" >
                <template v-slot:center="{record}">
                    <div class="RxMyTransmit-center">
                        <h1>{{ record.subject }}</h1>
                        <ul class="RxMyTransmit-ul">
                            <li>
                                <span>{{i18n('recipient','接收人')}}：</span>
                                <rx-user-info :userId="record.instCp.userId"></rx-user-info>
                            </li>
                            <li>
                                <span>{{i18n('read','是否已读')}}</span>
                                <span>{{ getIsRead(record) }}</span>
                            </li>
                            <li>
                                <span>{{i18n('readingTime','阅读时间')}}：</span>
                                <span >
                                   {{record.instCp.isRead=='YES'?record.instCp.updateTime:i18n('none','暂无')}}
                                </span>
                            </li>
                        </ul>
                    </div>
                </template>
            </rx-grid>
        </template>
    </rx-layout>
</template>

<script>
import RxGrid from '@/components/RxGrid'
import RxLayout from '@/components/RxLayout'
import BpmInstApi from '@/api/rxBpm/bpmInst.js'
import Util from '@/js/Util.js'
import RxUserInfo from "@/components/RxUserInfo.vue";

export default {
    name: "ReadingList",
    components: {RxGrid, RxLayout,RxUserInfo},
    data() {
        return {
            instId: '',
            appId: '',
            data:[],
        }
    },
    onLoad(option) {
        let appId = option.appId;
        if (!appId) {
            appId =  Util.getAppId(this);
        }
        this.appId=appId;
        this.instId=option.params ? JSON.parse(option.params).instId : "";
        this.getData();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "bpmLang", key);
        },
        getData(){
            if(!this.instId){
                return;
            }
            BpmInstApi.getBpmInstCc(this.instId).then(res=>{
                this.data=res;
            })
        },
        getIsRead(record){
            let readMap = {
                "YES":  this.i18n('ccShow.yes','已读'),
                "NO": this.i18n('ccShow.no','未读')
            }
            return readMap[record.instCp.isRead];
        }
    }
}
</script>

<style scoped>
.RxMyTransmit-center {
    position: relative;
    background: #fff;
    margin: .8rem .8rem 0 .8rem;
    border-radius: .3rem;
    box-shadow: 1px 1px 5px #dce1e6;
}

.RxMyTransmit-center h1 {
    font-weight: normal;
    line-height: 20px;
    font-size: 0.9rem;
    padding: 1.2rem 1rem 0.6rem 3.3rem;
}

.RxMyTransmit-center img {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    position: absolute;
    left: .8rem;
    top: .8rem;
}
.RxMyTransmit-ul {
    padding-bottom: .4rem;
}

.RxMyTransmit-ul li {
    display: flex;
    align-items: baseline;
    padding-bottom: .2rem;
    padding-left: 3.3rem;
}

.RxMyTransmit-ul li span:first-child {
    color: #9eacbb;
    display: inline-block;
    margin-right: .6rem;
}
</style>
